<template>
	<view>
		<view class="bgImgWp">
			<image style="width: 100%;height: 100%; opacity: 0.9;"
				src="https://file.casugn.com/storecompcard/temp/名片背景-个人视角@2x_1680576512696.png">
			</image>
		</view>
		<u-status-bar></u-status-bar>
		<!-- 自定义导航 -->
		<u-navbar title="名片" :bgColor="`rgba(103,107,133,${opacity||0})`"
			:titleStyle="{color:titleColor,fontWeight:500,fontSize:'34rpx'}">
			<view class="u-nav-slot" slot="left">
				<view class="bellWp" @click="goToNoticeCenter" v-if="!wxCheckType">
					<u-icon name="bell" size="50" :color="titleColor"></u-icon>
					<u-badge :isDot="true" type="error" v-if="hasMessage" :offset="[0,0]" :absolute="true"> </u-badge>
				</view>
			</view>
		</u-navbar>
		<view class="cardWp">
			<cardStyle :userInfo="myInfo" @goToPreviewMyPage="goToPreviewMyPage"></cardStyle>

			<!-- <div v-if="shareing" style="height: 100px;"></div> -->

			<view :class="{'hide-button':shareing}">
				<!-- 创建名片 -->
				<view class="editBtnWp" v-if="!myInfo.id">
					<view class=" editBtn">
						<u-button throttleTime="500" type="primary" color="#276AEE" shape="circle" :hairline="true" text="立即创建"
							@click="createMyCard">
						</u-button>
					</view>
				</view>
				<!-- 编辑按钮 -->
				<view class="editBtnWp" v-else>
					<view class="editBtn">
						<u-button throttleTime="500" type="primary" color="#276AEE" shape="circle" :plain="true" :hairline="true"
							text="完善信息" @click="goToEditCard(myInfo.id)">
						</u-button>
					</view>
					<view class="editBtn">
						<u-button open-type="share" throttleTime="500" type="primary" color="#276AEE" shape="circle" text="分享名片">
						</u-button>
					</view>
				</view>
				<view v-if="!wxCheckType">
					<guideVideoBar v-if="guideVideo" :videoInfo="videoInfo" @closedGuideVideo="closedGuideVideo">
					</guideVideoBar>
				</view>
				<!-- 浏览量统计 -->
				<whos-visit-me :avatarList="avatarList" :totalViews="totalViews"
					@handleTotalViews="goToByUrl('/pagesCard/visitorCounts/visitorCounts')"></whos-visit-me>
			</view>

			<kingArea :list="kingAreaList" @handleKingAreaItem="handleKingAreaItem"></kingArea>
			<!-- 编辑信息区域 -->
			<edit-info-area :myInfo="myInfo"></edit-info-area>
		</view>
	</view>
</template>
<script>
	import kingArea from './components/kingArea.vue'
	import whosVisitMe from './components/whosVisitMe.vue'
	import editInfoArea from './components/editInfoArea.vue'
	import guideVideoBar from './components/guideVideoBar.vue'
	import cardStyle from './components/cardStyle.vue'
	import {
		kingAreaList,
	} from '@/config/staticConfig.js'
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import {
		throttle,
		debounce
	} from '@/plugins/utils.js'
	export default {
		components: {
			cardStyle,
			kingArea,
			whosVisitMe,
			editInfoArea,
			guideVideoBar

		},
		data() {
			return {
				cardId: '', //个人名片id
				openId: '', //本人openId
				qrCodeImgUrl: '', //生成的小程序码地址
				current: 0,
				personInfoTags: [],
				myInfo: {},
				companyData: {},
				accessToken: "",
				friendNumber: 0,
				myImageList: [], //个人图片展示
				is_authorization: '',
				defaultUserInfo: {},
				hasMessage: false,
				isChecking: false,
				companyDataInfo: true, //是否显示公司相关信息
				scrollTop: 0, //页面在垂直方向已滚动的距离
				titleColor: '#fff',
				navbarBgColor: 'rgba(103,107,133,0)',
				opacity: 0,
				kingAreaList,
				avatarList: [],
				totalViews: '',
				guideVideo: true,
				videoInfo: null,
				shareing: false
			};
		},
		computed: {
			...mapGetters(['userInfo']),
			...mapState(['otherUserInfo', 'isSelf', 'wxCheckType']),
		},
		onLoad(opt) {
			if (opt.isFromFavorites && opt.cardId) {
				return uni.navigateTo({
					url: `/pagesCard/friendMainPage/friendMainPage?cardId=${opt.cardId}&openId=${opt.openId}&unionId=${opt.unionId}`
				})
			}
			this.$store.dispatch('wxcheckType') //微信审核查询
		},
		async onShow() {
			await this.getOpenId()
			await this.checkMessage()
		},
		onPullDownRefresh() {
			this.queryCurrentUserInfoByOpenId()
		},
		onReady() {
			uni.hideLoading()
		},
		onPageScroll({
			scrollTop
		}) {
			this.scrollTop = scrollTop
			let opacity = (this.scrollTop / 50).toFixed(2)
			this.$set(this, 'opacity', opacity)
		},
		methods: {
			//点击金刚区
			handleKingAreaItem(item) {
				console.log(item, 'handleKingAreaItem');
				switch (item.url) {
					case 'showMyQrcode':
						this.showMyQrcode()
						break;
					default:
						this.goToByUrl(item.url)
						break;
				}
			},
			goToEditCard(id) {
				if (id) {
					uni.navigateTo({
						url: '/pagesCard/cardEdit/cardEdit?cardId=' + id
					})
				} else {
					uni.showToast({
						title: '请先创建名片',
						icon: 'none'
					});
				}
			},
			//跳转创建名片
			createMyCard() {
				uni.showToast({
					title: '跳转创建名片',
					icon: 'none'
				})
				if (this.myInfo.id) {
					uni.showModal({
						title: '',
						content: '已有名片,是否继续创建?',
						showCancel: true,
						cancelText: '查看',
						confirmText: '继续',
						success: res => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pagesCard/createCard/createCard'
								})

							} else {
								this.queryCurrentUserInfoByOpenId()
							}
						},
					});
				} else {
					uni.navigateTo({
						url: '/pagesCard/createCard/createCard'
					})
				}
			},
			//查询名片的浏览用户头像、总浏览量和今日浏览量
			async queryBrowseInfo(cardId) {
				if (!cardId) {
					this.avatarList = []
					this.totalViews = ''
					return
				}
				let res = await this.$api.queryBrowseInfo({
					cardId
				})
				if (res.success) {
					//	console.log('查询名片的浏览用户头像、总浏览量和今日浏览量', res);
					this.avatarList = res.result.photoList
					this.totalViews = res.result.totalViews
				} else {
					this.avatarList = []
					this.totalViews = ''
				}
			},
			//是否有新消息
			async checkMessage() {
				let res = await this.$api.queryUnreadNotifyNum({
					openId: this.openId
				})
				if (res.success && res.result) {
					let {
						friendNum,
						groupNum,
						sysNum
					} = res.result
					if (friendNum > 0 || groupNum > 0 || sysNum > 0) {
						this.hasMessage = true
					} else {
						this.hasMessage = false
					}
				} else {
					this.hasMessage = false
				}
			},
			// 开启订阅消息设置窗口
			openMsgForParty() {
				var that = this
				that.accessTokenShow = false
				wx.getSetting({
					withSubscriptions: true,
					success: (res) => {
						// console.log(res, '成功')
						if (res.subscriptionsSetting.mainSwitch) {
							if (res.subscriptionsSetting.itemSettings != null && res.subscriptionsSetting
								.itemSettings['R0LuQ7uhDt8CaBjxeJPu-gTOFcg5PcBA8kHhkO4mqnE']
							) { // 用户同意总是保持是否推送消息的选择, 这里表示以后不会再拉起推送消息的授权
								let moIdState = res.subscriptionsSetting.itemSettings[
									'R0LuQ7uhDt8CaBjxeJPu-gTOFcg5PcBA8kHhkO4mqnE']; // 用户同意的消息模板id
								if (moIdState === 'accept') {
									that.is_authorization = true;
									wx.requestSubscribeMessage({ // 调起消息订阅界面
										tmplIds: ['R0LuQ7uhDt8CaBjxeJPu-gTOFcg5PcBA8kHhkO4mqnE'],
										success(res) {
											//	console.log('勾选了总是,并且订阅成功', res);
										},
									})
									uni.setStorageSync('is_authorization',
										false);
								} else if (moIdState === 'reject') {
									that.is_authorization = false

									uni.setStorageSync('is_authorization',
										false);
									console.log("拒绝消息推送");
									wx.showModal({
										title: '温馨提示',
										content: "检测到您没有开启订阅消息的权限，是否去设置？",
										success: function(modal) {
											if (modal.confirm) { // 点击肯定
												wx.openSetting({
													withSubscriptions: true
												});
												that.is_authorization = true;
												uni.setStorageSync('is_authorization',
													false);
											} else {
												uni.showToast({
													title: "您已拒绝订阅,无法获取消息通知",
													icon: "error"
												});
												that.is_authorization = false;
												uni.setStorageSync('is_authorization',
													false);
											}
										}
									})
								} else if (moIdState === 'ban') {
									console.log("已被后台封禁");
									that.is_authorization = true;

									uni.setStorageSync('is_authorization',
										true);
								}
							} else {
								wx.requestSubscribeMessage({ // 调起消息订阅界面
									tmplIds: ['R0LuQ7uhDt8CaBjxeJPu-gTOFcg5PcBA8kHhkO4mqnE'],
									success(res) {
										//	console.log('用户没有点击 总是保持询问,订阅消息 成功', res);
										that.is_authorization = false
										uni.setStorageSync('is_authorization',
											false);
									},
									fail(err) {
										that.is_authorization = false
										uni.setStorageSync('is_authorization',
											false);
										console.log(err, "订阅消息 失败 ");
									}
								})
							}

						} else {
							console.log('订阅消息未开启')
							wx.showModal({
								title: '温馨提示',
								content: "检测到您没有开启订阅消息的权限，是否去设置？",
								success: function(modal) {
									if (modal.confirm) { // 点击肯定
										wx.openSetting({
											withSubscriptions: true
										});
										that.is_authorization = true;
										uni.setStorageSync('is_authorization',
											false);
									} else {
										uni.showToast({
											title: "您已拒绝订阅消息授权，无法获取消息通知",
											icon: "error"
										});
										that.is_authorization = false;
									}
								}
							})
						}
					},
					fail: function(error) {
						console.log(error, '失败');
					},
				})
			},
			//获取openId
			async getOpenId() {
				uni.showLoading({})
				//获取本地缓存中的 openId
				let data = uni.getStorageSync('openId')
				if (data.openid) {
					this.openId = data.openid
					//使用获取到的openId 去后台查询个人信息
					await this.queryCurrentUserInfoByOpenId()
					await this.checkGuideVideo(this.openId)
					await this.querySupplyDefault()
				} else {
					uni.login({
						provider: 'weixin',
						onlyAuthorize: true,
						success: async (loginRes) => {
							let code = loginRes.code
							let payload = {
								code
							}
							let res = await this.$api.getOpenIdByCode(payload);
							if (res) {
								this.openId = res.openid
								this.$store.commit('setOpenId', res)
								//使用获取到的openId 去后台查询个人信息
								await this.queryCurrentUserInfoByOpenId()
								await this.checkGuideVideo(this.openId)
								await this.querySupplyDefault()
							} else {
								uni.showToast({
									title: '获取数据失败,请检查网络',
									icon: 'none'
								});
							}
						}
					});
				}
			},
			//获取当前供应商信息
			async querySupplyDefault() {
				this.$api.querySupplyDefault({
					openId: this.openId
				}).then(res => {
					if (res.success) {
						//存在供应商
						this.$store.commit('setSupplierInfo', res.result)
					} else {
						this.$showToast(res.message)
					}
				})
			},
			//通过自己的openId查询名片信息
			async queryCurrentUserInfoByOpenId() {
				let res = await this.$api.queryCurrentCardByOpenId({
					openId: this.openId
				})
				if (res.success && res.result) {
					console.log(res.result, '通过自己的openId查询名片信息');
					this.myInfo = {
						...res.result
					}
					if (res.result.id) {
						this.cardId = res.result.id
						uni.setStorageSync('cardId', this.cardId)
						this.queryBrowseInfo(this.cardId)
					}
					if (res.result.bcCompanyAbout == null) {
						this.companyDataInfo = false
						this.companyData = {}
						this.companyData.swiperList = []
					} else {
						this.companyData = res.result.bcCompanyAbout || {}
						this.companyDataInfo = true
						if (this.companyData.carousel.length > 0 && this.companyData.carousel && this.companyData
							.carousel != undefined) {
							if (this.companyData.carousel.indexOf(',') == -1) {
								this.companyData.swiperList = []
								this.companyData.swiperList.splice(0, 1, this.companyData.carousel)
							} else {
								let arr = this.companyData.carousel.split(",")
								this.companyData.swiperList = arr.map(item => {
									let newItem = {
										url: item,
										filePath: item
									}
									return newItem
								})
							}

						}
					}
					this.$store.commit('userInfo', this.myInfo)
					this.$store.commit('setIsSelf', true)
					uni.stopPullDownRefresh()
				} else {
					uni.showToast({
						title: '未获取到数据,请下拉刷新页面',
						icon: 'none'
					});
				}
				uni.hideLoading()
			},
			goToByUrl(url) {

				if (!this.myInfo.id) {
					uni.hideLoading()
					return uni.showToast({
						title: '请先创建名片',
						icon: 'none'
					});
				} else {
					this.goTo(url)
				}
			},
			goTo(url) {
				const pageNum = getCurrentPages()
				console.log('navigateTo pageNum: ', pageNum.length)
				if (pageNum.length > 9) {
					//当打开10个页面时，用redirectTo
					uni.redirectTo({
						url
					})
				} else {
					uni.navigateTo({
						url
					})
				}
			},

			//搜索栏
			// goToSearchList() {
			// 	if (!this.myInfo.id) {
			// 		return uni.showToast({
			// 			title: '请先创建名片',
			// 			icon: 'none'
			// 		});
			// 	}
			// 	uni.navigateTo({
			// 		url: '/pagesCard/searchList/searchList'
			// 	})
			// },
			//显示我的小程序码
			async showMyQrcode() {
				uni.showLoading({
					title: 'loading'
				})
				//发送到后台scene 生成指定小程序码图片
				if (!this.myInfo.id) {
					uni.hideLoading()
					return uni.showToast({
						title: '请先创建名片',
						icon: 'none'
					});
				}
				let scene = String(this.myInfo.id)
				let params = {
					scene,
					page: 'pagesCard/friendMainPage/friendMainPage',
					check_path: false
				}
				let res = await this.$api.getPhotoUrl(params)
				if (res.success) {
					this.qrCodeImgUrl = res.result
					// 跳转新页面携带参数
					uni.navigateTo({
						url: "/pagesCard/userQrCode/userQrCode?qrCodeImgUrl=" +
							encodeURIComponent(JSON.stringify(this.qrCodeImgUrl)) + '&openId=' + this
							.myInfo.openId + '&cardId=' + this
							.myInfo.id,
					});
				} else {
					uni.showToast({
						title: '生成小程序码错误',
						icon: 'none'
					});
				}
				uni.hideLoading()
			},
			//预览名片
			goToPreviewMyPage() {
				if (!this.userInfo.id) {
					return uni.showToast({
						title: '请先创建名片',
						icon: 'none'
					})
				}
				uni.navigateTo({
					url: `/pagesCard/previewMyPage/previewMyPage?cardId=${this.myInfo.id}&openId=${this.myInfo.openId}&unionId=${this.myInfo.unionId}`
				})
			},
			//去通知中心
			goToNoticeCenter() {
				uni.switchTab({
					url: '/pages/message/message'
				})
			},
			async checkGuideVideo(openId) {

				let res = await this.$api.checkGuideVideo({
					openId
				})
				if (res.success) {
					console.log(res.result);
					this.guideVideo = res.result.status == 0 ? true : false
					this.videoInfo = res.result
				} else {
					this.guideVideo = false
					this.videoInfo = null

				}
			},
			async closedGuideVideo() {
				uni.showModal({
					showCancel: false,
					content: '关闭后可在我的页面-帮助中心-再次查看',
					success: async (res) => {
						if (res.confirm) {
							let res2 = await this.$api.closedGuideVideo(
								this.openId
							)
							if (res2.success) {
								console.log(res2.result);
								this.guideVideo = false
								this.videoInfo = null
							}
						}
					}
				})

			}

		},
		onShareAppMessage(res) {
			this.shareing = true
			setTimeout(() => {
				this.shareing = false
			}, 1000)

			if (res.from === 'button') { // 来自页面内分享按钮且是本人分享
				console.log('来自页面内分享按钮', res.target.dataset);
				if (!this.myInfo.id) {
					return uni.showToast({
						title: '请先创建名片',
						icon: 'none'
					});
				} else {
					return {
						title: `我的拜帖`,
						path: `/pagesCard/friendMainPage/friendMainPage?cardId=${this.myInfo.id}&openId=${this.myInfo.openId}&unionId=${this.myInfo.unionId}`
					}
				}
			} else {
				if (!this.myInfo.id) {
					return uni.showToast({
						title: '请先创建名片',
						icon: 'none'
					});
				} else {
					return {
						title: `拜帖`,
						path: `/pagesCard/friendMainPage/friendMainPage?cardId=${this.myInfo.id}&openId=${this.myInfo.openId}&unionId=${this.myInfo.unionId}`
					}
				}
			}
		},
		// 收藏功能
		onAddToFavorites() {
			return {
				title: `我的拜帖-收藏`,
				query: `cardId=${this.myInfo.id}&isFromFavorites=${true}&openId=${this.myInfo.openId}&unionId=${this.myInfo.unionId}`
			}

		}

	}
</script>

<style lang="scss" scoped>
	// 导航栏
	.bellWp {
		position: relative;
		margin-left: 20rpx;
	}

	.bgImgWp {
		top: -10rpx;
		position: absolute;
		z-index: -1;
		width: 750rpx;
		height: 648rpx;

	}

	.cardWp {
		margin-top: 128rpx;
		// background-color: #F8F9FF;



		.titleWp {
			background-color: #f8f9ff;
			height: 80upx;
			display: flex;
			align-items: center;
			overflow: hidden;
			// margin: 40upx 30upx;
			margin: 40upx 0;

			.colorBlock {
				background-color: #7b77fe;
				width: 20upx;
				height: 100%;
				margin-right: 20upx;
			}

			.mainTitle {
				font-weight: 600;
			}
		}

		.indexTabsWp {
			margin: 0 30rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 50rpx;



			.indexTab {
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				font-weight: bold;
				color: #999;
				text-shadow: 1rpx 1rpx #eee;
				font-size: 35rpx;

			}

			.actived {
				color: $u-primary;
				border-bottom: 2px solid #015EEA;
			}
		}

		.searchBox {
			// background-color: #fff;
			display: flex;
			padding: 30upx;
			align-items: center;

			.inputWp {
				background-color: #E4ECFF;
				border-radius: 40upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex: 1;
				height: 80upx;

				.text {
					margin-left: 40upx;
					flex: 1;
					font-size: 24upx;
					font-weight: 400;
					color: #999999;
				}

				.iconWp {
					margin-right: 30upx;
				}
			}

			.moreImgWp {
				background-color: #E8EFF9;
				width: 80upx;
				height: 80upx;
				border-radius: 30%;
				margin-left: 20upx;
				display: flex;
				justify-content: center;
				align-items: center;

				img {
					width: 70upx;
					height: 70upx;
				}
			}
		}


		.gridWp {
			margin: 40upx;
			display: flex;
			justify-content: space-between;

			.u-grid-item {
				text-align: center;
				flex: 1;

				.imgWp {
					display: flex;
					justify-content: center;
					align-items: center;
					padding-bottom: 8upx;

					img {
						text-align: center;
						width: 80upx;
						height: 80upx;
					}
				}

				.text {
					font-size: 24upx;
					font-weight: 400;
					color: #666666;
					line-height: 30upx;
				}
			}
		}

		//编辑 名片 分享名片
		.editBtnWp {
			margin: 30rpx 15rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.editBtn {
				margin: 0 15rpx;
				flex: 1;
				height: 72rpx;

			}

		}

		//旧版btn样式
		.btnWp {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 30upx;
			position: relative;
			overflow: hidden;

			.lineBlock {
				height: 100upx;
				width: 26upx;
				background-color: #fff;
				position: absolute;
				left: 50%;
				transform: translateX(-50%) rotate(13deg);
			}

			.sendCard {
				color: #fff;
				background-color: #7b77fe;
				text-align: center;
				line-height: 80upx;
				font-size: 30upx;
				flex: 1;
				border-radius: 50upx 0 0 50upx;


			}

			.triangle1 {

				width: 0;

				height: 0;

				border-top: 30px solid #423CFE;

				border-right: 30px solid transparent;
			}

			.triangle2 {
				height: 80upx;
				width: 32upx;
				background: linear-gradient(45deg, #1D2B56, #1D2B56 50%, transparent 50%, transparent 100%);
			}

			.foundCard {
				flex: 1;
				line-height: 80upx;
				background-color: #f8aa69;
				color: #fff;
				text-align: center;
				font-size: 30upx;
				border-radius: 0 50upx 50upx 0;
			}
		}

		.browse {
			margin: 40upx 30upx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.browseStatistics {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.avatar {
					flex: 1;
					display: flex;

					img {
						border-radius: 50%;
						width: 60upx;
						height: 60upx;
						margin: 0 -10upx;
					}
				}

				.todayNum {
					margin-left: 40upx;
					font-size: 30upx;

					.green {
						color: #1BDC24;
						margin: 0 10upx;
					}
				}

			}

			.totalNumWp {
				font-size: 30upx;
				display: flex;

				.totalNum {
					margin: 0 10upx;
					font-size: 24upx;
					font-weight: 400;
					color: #000000;
				}
			}

		}



		.banner {

			img {
				width: 100%;
				height: 331upx;
			}
		}

		.showGirdWpText {
			font-size: 30upx;
			color: #333;
			font-weight: 400;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
		}

		.hot {
			box-sizing: border-box;
			margin: 40upx 30upx;

			.title {
				display: flex;
				justify-content: space-between;
				margin: 40upx 0;

				.left {
					flex: 1;
					font-size: 36upx;
					font-weight: 600;
					color: #000000;
					line-height: 30upx;
				}

				.right {
					width: 30upx;
					color: #666666;
					font-size: 36upx;
				}
			}

			.hotGoodsWp {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;

				.hotGoodsItem {
					border: 1upx solid #eee;
					box-sizing: border-box;
					border-radius: 20upx;
					width: 49%;
					margin: 5upx 0;
					display: flex;
					align-items: center;
					background-color: #fff;
					height: 100upx;

					&:nth-child(2n) {
						margin-left: 10upx;
					}

					.left {
						width: 66upx;
						height: 66upx;
						margin: 20upx;

						img {
							width: 100%;
							height: 100%;
						}
					}

					.right {
						margin-left: 40upx;
						font-size: 30upx;
						font-weight: 400;
						color: #333333;
					}
				}
			}
		}



		.nomore {

			padding: 20upx;
			height: 60upx;

		}


		.paddingBar {
			background-color: #F8F9FF;
			height: 30upx;
			width: 100%;
		}

		.fabBtn {
			z-index: 50;
			position: fixed;
			bottom: 20vh;
			right: 50upx;

			.share {
				text-align: center;
				width: 100upx;
				height: 100upx;
				border-radius: 50%;
				background-color: $u-primary;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				position: relative;

				.text {
					font-size: 24rpx;
					color: #fff;
				}

			}

			.indexShareBtnWp {
				width: 100upx;
				height: 100upx;
				border-radius: 50%;
				position: absolute;
				top: 5rpx;
				left: 0;
				opacity: 0;
				z-index: 10;

				.indexShareBtn {
					opacity: 0;
					width: 100%;
					height: 100%;
				}

			}




			.badgeImgWp {
				margin: 0 auto;
				position: relative;

				.icons {
					width: 100upx;
					height: 100upx;
				}


				.badgeNumber {
					text-align: center;
					width: 32upx;
					height: 32upx;
					background-color: red;
					color: #fff;
					border-radius: 50%;
					position: absolute;
					font-size: 24upx;
					line-height: 32upx;
					top: -4upx;
					right: -16upx;
				}
			}

		}



		.hotGoodsWp {
			margin: 40upx 30upx;


		}
	}

	.gridPopupWp {
		height: 300upx;

		.text-b {
			color: #276aee !important;
		}

		.gridPopupListItem {
			text-align: center;
			line-height: 100upx;
			height: 100upx;
			border-bottom: 1upx solid #eee;
			font-size: 32upx;
			font-weight: 300;
			color: #333333;
		}
	}

	.access-box {
		height: 300upx;
		background: white;

		.access-title {
			text-align: center;
			margin-top: 40upx;
		}

		.access-asc {
			margin: 0 auto;
			margin-top: 60upx;
			width: 50%;

		}
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	::v-deep .u-form-item__body__left__content__label {
		font-weight: 600 !important;
	}

	// 横向滚动
	.scrollWp {
		overflow: scroll;
		white-space: nowrap;
		display: flex;
		margin-top: 50rpx;

		.scrollPartyItem {

			display: inline-block;
			text-shadow: 1px 1px #ccc;
			text-align: center;
			border-radius: 10rpx;
			margin: 0rpx 30rpx 10rpx 0;

			&:nth-child(1) {
				margin-left: 30rpx !important;
			}



			.scrollPartyItemBox {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				width: 100%;
				height: 100%;

				.imgWp {

					text-align: center;
					width: 125rpx;
					height: 125rpx;
					display: flex;
					justify-content: center;

					img {
						width: 100%;
						height: 100%;
					}

				}

				.text {
					text-align: center;
					margin-top: 25rpx;
					font-size: 25rpx;
				}
			}

		}

	}

	.hide-button {
		visibility: hidden;
	}
</style>
